<template>
	<view>
		<view class="history">历史记录</view>

		<scroll-view scroll-y="true" style="height: 100%;">
			<view v-for="(item,i) in videos" class="item" :key="i" @click="play(item)">
				<image :src="item.imgUrl" mode="aspectFill" class="item-img"></image>
				<view class="item-text">
					<view class="item-title">
						{{item.title}}
					</view>
					<view class="item-time">
						{{item.time}}
					</view>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// {imgUrl, title, url}
				videos: [{
					imgUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.gamersky.com%2Fupimg%2Fusers%2F2019%2F09%2F05%2Fsmall_201909051805125211.jpg&refer=http%3A%2F%2Fimg1.gamersky.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632021215&t=fe5adc149608a817435c59fa40f61471",
					src: "",
					title: "测试标题1",

				}, ]
			}
		},
		methods: {
			play(val){
				uni.navigateTo({
					url: "../vidoDetail/vidoDetail" + "?url=" + val.url,
				})
			},
			getData() {
				uni.getStorage({
					key: "history",
					success: (e) => {
						console.log(e)
						this.videos = e.data
						this.videos.reverse()
					}
				})
			}
		},
		onShow() {
			this.getData()
		}
	}
</script>

<style>
	.history {
		width: 90%;
		border-bottom: 1px #DCDFE6 solid;
		font-size: 1.8em;
		font-weight: bold;
		margin: 40rpx auto;
	}

	.item {
		display: flex;
		margin: 20rpx 0;
	}

	.item-img {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
		margin: 0 30rpx;
	}

	.item-text {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.item-title {
		font-size: 1.2em;
		color: #303133;
	}

	.item-time {
		color: #303133;
		font-size: 0.8em;
		margin-bottom: 20px;
	}
</style>
